<!--
 * @Author: luosi 1297957337@qq.com
 * @Date: 2024-11-19 10:22:11
 * @LastEditors: 宋绍华
 * @LastEditTime: 2024-12-20 16:29:57
 * @FilePath: \sr_system_manager_ui\src\components\QuickText\index.vue
 * @Description: 审核意见输入框
-->
<script setup lang="ts">
import { dictEnum } from '@/utils/constEnum';

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ""
  },
  rows: {
    type: Number,
    default: 4,
  },
  maxlength: {
    type: Number,
    default: 2000,
  },
})

const emits = defineEmits(['update:model-value'])

const value = computed({
  get: () => props.modelValue,
  set: (value: string) => {
    emits('update:model-value', value)
  }
})

const { proxy } = getCurrentInstance()

const dict = proxy.useDict(dictEnum.reviewOpinion)

const quickTextList = computed(() => dict[dictEnum.reviewOpinion] || [])

const handleText = (text: string) => {
  value.value += text
}
</script>

<template>
  <div>
    <el-input  v-bind="$attrs" v-model="value" type="textarea" placeholder="请输入..." :maxlength="props?.maxlength" show-word-limit :rows="props?.rows" />
    <div class="flex flex-wrap mt-[8px]">
      <div v-for="item in quickTextList" :key="item.value" class="item" @click="handleText(item.title)">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.item {
  --at-apply: mr-[12px] mb-[12px] leading-[20px] px-[16px] py-[4px] text-[#1D2129] text-[12px] rounded-[4px] bg-[#F2F3F5] cursor-pointer;
}

.item:hover {
  --at-apply: text-[#57A9FB] bg-[#E8F7FF];
}
</style>